<template>
    <div style="width: 100%; height: 80%">
        <div class="chart8"></div>
    </div>
</template>
  
<script>
import apis from '@/apis/api'
import * as echarts from "echarts";
export default {
    data() {
        return {
            list: []
        }
    },
    mounted() {
        this.getList()
    },
    computed: {},

    methods: {
        getList() {
            /** 事件类型统计分布 */
            apis.analysisTask({}).then(result => {
                let res = result.data;
                this.list = res;
                // this.databox2 = res;
                this.init();
            });
        },
        init() {
            var myChart = echarts.init(document.querySelector(".chart8"));
            let option = {
                color: ["green", 'orange', 'red'],
                legend: {
                    width: '40%',
                    right: "0%",
                    data: ['已完成', '未完成', '待接收'],
                    textStyle: {
                        color: "#fff",
                        fontSize: ".2rem"
                    }
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: "0%",
                    top: "10%",
                    right: "0%",
                    bottom: "16%",
                    borderColor: "#012f4a",
                    containLabel: true
                },
                dataZoom: [
                    {
                        show: true,
                        start: 0,
                        end: 15,
                        left: '1%',
                        right: '1%',
                        showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                        height: '12',
                    },
                ],
                xAxis: [
                    {
                        type: "category",
                        data: [...new Set(this.list.map(i => i.name))],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            // rotate: 60,
                            textStyle: {
                                color: "rgba(255,255,255,1)",
                                fontSize: ".18rem"
                            }
                        },
                        axisLine: {
                            show: true
                        }
                    }
                ],
                yAxis: [
                    {
                        axisLine: {
                            show: true
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#fff",
                                // fontSize: 12
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        }
                    }],
                series: [
                    {
                        name: "已完成",
                        type: "bar",
                        // barWidth: "30%",
                        barCategoryGap: '40%',
                        data: this.list.filter(i => i.type == 2),
                        itemStyle: {
                            barBorderRadius: 0
                        }
                    },
                    {
                        name: "未完成",
                        type: "bar",
                        // barWidth: "30%",
                        barCategoryGap: '40%',
                        data: this.list.filter(i => i.type == 1),
                        itemStyle: {
                            barBorderRadius: 0
                        }
                    },
                    {
                        name: "待接收",
                        type: "bar",
                        // barWidth: "30%",
                        barCategoryGap: '40%',
                        data: this.list.filter(i => i.type == 0),
                        itemStyle: {
                            barBorderRadius: 0
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    },
}
</script>

<style lang="scss" scoped>
.chart8 {
    width: 100%;
    height: 100%;
}
</style>